import axios from 'axios'
import { Loading, Message } from 'element-ui';


const loading = {
    loadingInstance: null, // loading 实例
    // 打开加载
    open: function () {
        // 单例模式
        if (this.loadingInstance === null) {
            this.loadingInstance = Loading.service({
                target: '.main',
                background: "rgba(0, 0, 0, 0.2)",
                text: "拼命加载中..."
            });
        }
    },
    // 关闭加载
    close: function () {
        if (this.loadingInstance) {
            this.loadingInstance.close()
        }
        this.loadingInstance = null
    }
}


// 手动创建一个 axios 对象, 参考: https://github.com/axios/axios#creating-an-instance 
const request = axios.create({
    // 请求配置参考: https://github.com/axios/axios#request-config
    // 根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL , 
    // 比如 get('/test'), 最终发送请求是: /dev-api/test
    // /db.json 通过 axios > /dev-api/db.json > 通过代理转发(vue.config.js) > http://localhost:8001
    baseURL: process.env.VUE_APP_BASE_API,
    // baseURL: '/',
    timeout: 5000, // 请求超时
    headers: { 'X-Custom-Header': 'foobar' }
})

// 请求拦截器
request.interceptors.request.use(config => {
    // 请求拦截
    // 打开加载窗口
    loading.open()
    return config;
}, error => {
    // 出现异常
    loading.close()
    return Promise.reject(error);
});

// 相应拦截器
request.interceptors.response.use(response => {
    // response data
    loading.close()
    const resp = response.data
    // 如果后台响应不是2000,说明后台处理有问题
    if (resp.code !== 2000) {
        Message({
            message: resp.message || "系统异常",
            type: 'warning',
            duration: 5 * 1000
        })
    }
    return response;
}, error => {
    // 出现异常
    loading.close()
    Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
    })
    return Promise.reject(error);
});

export default request // 导出自定义创建的 axios 对象